<template>
	<view class="wrap">
		<view class="nav app_flex-jcc">
			<view class="nav-item" :class="{active: navIndex == index}" v-for="(item,index) in navList" :key="index"
				@click="onNavTap(index)">{{item.name}}</view>
		</view>
		<template v-if="navIndex == 0">
			<view class="edit">
				<g-item>
					<template v-slot:left>编辑类型</template>
					<template v-slot:right>
						<view class="select app_arrow" @click="showTypePopFlag = true">
							{{stateList[stateIndex].type==-1?'请选择':stateList[stateIndex].name}}
						</view>
					</template>
				</g-item>
				<!-- <g-item>
					<template v-slot:left>编辑条数</template>
					<template v-slot:right>
						<input type="text" placeholder="请输入条数" placeholder-class="app_phc">
					</template>
				</g-item> -->
				<g-item>
					<template v-slot:left>编辑数量</template>
					<template v-slot:right>
						<view class="app_flex-aic">
							<input v-model="editAmount" type="text" placeholder="请输入数量"
								placeholder-class="app_phc"><text style="margin-left: 24rpx;">条</text>
						</view>
					</template>
				</g-item>
			</view>
			<view class="btn">
				<g-btn @click="editInventory"></g-btn>
			</view>
		</template>
		<template v-if="navIndex == 1">
			<view class="detail">
				<view class="detail-item" v-for="(item, index) in list" :key="index">
					<view class="detail-item_T app_flex-jcsb">
						<view class="detail-item_TL app_flex">
							<view class="detail-item_TLtitle">
								{{item.recordWay == 1 ? '手工': ''}}{{item.state == 1 ? '入库':'出库'}}
							</view>
							<view class="detail-item_TLtype" :class="{out: item.state == 1}">
								{{item.state == 1 ? '入库':'出库'}}
							</view>
						</view>
						<view class="detail-item_TR">{{item.amount}}条({{item.totalAmountMeter + item.unit}})</view>
						<!-- <view class="detail-item_TR">1条 (23米)</view> -->
					</view>
					<view class="detail-item_B app_flex-jcsb">
						<view class="detail-item_BL">
							库存结余：{{item.currAmount}}条({{item.totalCurrAmountMeter + item.unit}})</view>
						<view class="detail-item_BR">{{item.createTime}}</view>
					</view>
				</view>
			</view>
			<no-data v-if="list.length == 0 && hasLoad"></no-data>
			<no-more v-if="page > 1 && noMore"></no-more>
		</template>
		<u-popup v-model="showTypePopFlag" mode="bottom" border-radius="16">
			<view class="typePop">
				<view class="typePop-item" :class="{cancel: item.type == -1}" v-for="(item, index) in stateList"
					:key="index" @click="onStateItemTap(index)">{{item.name}}</view>
			</view>
		</u-popup>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				repoId: '',
				showTypePopFlag: false,
				navIndex: 0,
				navList: [{
					name: '编辑库存'
				}, {
					name: '库存明细'
				}],
				stateIndex: 2,
				stateList: [{
					name: '入库',
					type: 1
				}, {
					name: '出库',
					type: 2
				}, {
					name: '取消',
					type: -1
				}],
				list: [],
				page: 1,
				size: 15,
				hasLoad: false,
				noMore: false,
				editAmount: '',
			}
		},
		onLoad(options) {
			this.repoId = options.repoId
		},
		onReachBottom() {
			this.page++
			this.inventoryDetail()
		},
		methods: {
			onNavTap(index) {
				this.navIndex = index
				if (index == 1) {
					this.resetPage()
					this.inventoryDetail()
				}
			},
			onStateItemTap(index) {
				this.stateIndex = index
				this.showTypePopFlag = false
			},
			resetPage() {
				this.list = []
				this.page = 1
				this.size = 15
				this.hasLoad = false
				this.noMore = false
			},
			/**
			 * 编辑库存
			 */
			editInventory() {
				let state = this.stateList[this.stateIndex].type
				if (state == -1) {
					uni.showToast({
						title: '请选择编辑类型',
						icon: 'none'
					})
					return
				}
				if (!this.editAmount || this.editAmount == 0) {
					uni.showToast({
						title: '请编辑数量',
						icon: 'none'
					})
					return
				}
				this.$g_api.repositoryUpdate({
					state,
					repoId: this.repoId,
					amount: this.editAmount
				}).then(({
					data
				}) => {
					let msg = ''
					if (state == 1) {
						msg = '入库成功'
					} else if (state == 2) {
						msg = '出库成功'
					}
					msg && uni.showToast({
						title: msg
					})
					uni.$emit('update-singleUpdate', this.repoId)
				})
			},
			/**
			 * 库存明细
			 */
			inventoryDetail() {
				this.$g_api.repositoryListRecordRepoId({
					page: this.page,
					size: this.size,
					repoId: this.repoId
				}).then(({
					data
				}) => {
					this.hasLoad = true
					if (data.length > 0) {
						data.forEach(item => {
							item.createTimeStr = new Date(item.createTime).Format('yyyy-MM-dd hh:mm')
						})
						this.list = this.list.concat(data)
					} else {
						this.noMore = true
					}
				})
			}
		}
	}
</script>

<style scoped lang="scss">
	input {
		text-align: right;
	}

	.nav {
		padding: 20rpx 0;
	}

	.nav-item {
		width: 200rpx;
		line-height: 70rpx;
		text-align: center;
		font-size: 26rpx;
		background-color: #fff;

		&:first-child {
			border-radius: 10rpx 0 0 10rpx;
		}

		&:last-child {
			border-radius: 0 10rpx 10rpx 0;
		}

		&.active {
			color: #fff;
			background-color: $g-main-color;
		}
	}

	.btn {
		margin-top: 70rpx;
	}

	.typePop {
		padding-bottom: constant(safe-area-inset-bottom);
		padding-bottom: env(safe-area-inset-bottom);
		background-color: #fff;
	}

	.typePop-item {
		line-height: 100rpx;
		text-align: center;
		border-bottom: 1px solid $g-border-color;

		&.cancel {
			border-top: 20rpx solid $g-border-color;
		}
	}

	.detail {}

	.detail-item {
		padding: 28rpx;
		border-bottom: 1px solid $g-border-color;
		background-color: #fff;
	}

	.detail-item_T {
		margin-bottom: 28rpx;
	}

	.detail-item_TL {}

	.detail-item_TLtitle {
		font-size: 30rpx;
	}

	.detail-item_TLtype {
		margin-left: 20rpx;
		padding: 8rpx 12rpx;
		line-height: 20rpx;
		border-radius: 6rpx;
		font-size: 20rpx;
		color: #FF7733;
		background-color: #FFF0E8;

		&.out {
			color: #3377FF !important;
			background-color: #E5EEFF !important;
		}
	}

	.detail-item_TR {
		font-size: 30rpx;
	}

	.detail-item_B {}

	.detail-item_BL {
		font-size: 24rpx;
	}

	.detail-item_BR {
		font-size: 24rpx;
		color: #999;
	}
</style>
